@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

/* Styleshees for graphs */

div.graph_hover_popup {
  width: intrinsic; /* Safari/WebKit */
  width: -moz-max-content; /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  padding: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

div#hover_menu div.graph {
  float: left;
  margin-right: 2px;
  margin-bottom: 2px;
}

tr.data > td > div.graph_container {
  vertical-align: top;
}

div.graph {
  position: relative;
  display: inline-block;
  padding: 0;
  margin-bottom: 5px;
  border-spacing: 0;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  div.title {
    margin-bottom: 1ex;
    font-weight: $font-weight-bold;
    text-align: center;
  }

  img.loading {
    display: block;
    margin: 20px auto;
  }

  div.time {
    position: absolute;
    top: 0;
    right: 18px;
    z-index: 10;
    margin-top: 5px;
    text-align: right;
  }

  div.v_axis_label {
    position: absolute;
    top: 10px;
    left: 18px;
    text-align: left;
  }

  img.resize {
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 10;
    width: 12px;
    height: 12px;
    cursor: se-resize;
  }

  img.iconbutton {
    /* sync graphs currently only */
    position: absolute;
    bottom: 33px;
    left: 9px;
  }

  canvas {
    display: block;
    margin: 0;
    cursor: crosshair;
  }

  table.legend {
    border-collapse: collapse;

    .scalar {
      width: 80px;
      padding: 1px 10px;
    }

    th,
    th.scalar {
      padding-bottom: 3px;
      font-weight: $font-weight-bold;
      text-align: right;
      background-color: transparent;
      border-style: none;
    }

    th.scalar.inactive {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    > tbody > tr:nth-child(2) td {
      padding-top: 4px;
    }

    td {
      text-align: left;

      &.scalar {
        text-align: right;
      }
    }

    > tbody > tr.scalar.first {
      border-top: 1px solid $font-color;

      td {
        padding-top: 4px;
      }
    }

    div {
      display: inline-block;
      float: none;

      &.entry {
        margin-right: 20px;
        margin-left: 5px;
      }
    }
  }

  div.popup_trigger {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }

  a.popup_trigger {
    display: block;
    width: 20px;
    height: 20px;

    &:hover {
      cursor: pointer;
    }
  }

  div.indicator {
    position: absolute;
    width: 1px;
    height: 30px;
  }

  /* Small preview graphs */
  &.preview {
    padding: 0;
    margin: 0;

    > div.title {
      position: absolute;
      top: 5px;
      z-index: 10;
      width: 100%;
      font-size: $font-size-large;
      font-weight: $font-weight-default;
    }
  }

  div.title.inline,
  div.time.inline {
    position: absolute;
    top: 10px;
    z-index: 10;
    margin: 0;
    font-weight: $font-weight-bold;
    text-align: center;
  }

  div.title.inline {
    width: 100%;
  }
}

table.prediction td {
  padding: 0;
}

div.graph table.legend th,
div.graph table,
legend td {
  padding: 2px 8px 2.5px 2px;
  white-space: nowrap;
}

div.color {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  vertical-align: top;
  border: 1px solid;
  border-radius: 0;
}

/* Graphs with timerange selection */
div.graph_with_timeranges {
  display: block;
  margin-bottom: 32px;
  white-space: nowrap;

  div.graph {
    border: 1px solid $color-table-border;
    box-shadow: none;

    div.title {
      display: block;
    }

    canvas {
      margin-bottom: 8px;
    }

    &.preview canvas {
      margin-bottom: 0;
    }

    &.preview .title {
      top: 12px;
      width: calc(100% - 16px);
      padding: 8px 0;
      font-weight: $font-weight-default;
      color: $font-color;
      text-shadow: none;
      box-sizing: border-box;
    }

    table.legend {
      margin-top: 32px;

      th.scalar {
        text-align: right;
      }

      td {
        background: transparent;
      }
    }
  }

  > div.graph_container {
    display: inline-block;

    div.popup_menu {
      max-height: 35vh;
      overflow: auto;
    }
  }

  tr.data > td > div.timerange {
    display: block;
  }

  table.timeranges {
    display: inline-block;
    vertical-align: top;
    border-spacing: 0;

    div.graph:hover {
      cursor: pointer;
      opacity: 0.75;
    }

    > tbody > tr > td {
      padding: 0 8px 4px;
    }
  }

  table.data td > div:first-child & {
    margin-top: 8px;
  }

  table.data td > div:last-child & {
    margin-bottom: 8px;
  }
}
